<template>
  <div class="login">
    <div class="title">登录页</div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="用户名"
        placeholder="请输入账号"
        :rules="[{ required: true, pattern:/^1[3-9]\d{9}$/, message: '请输入账号' }]"
      />
      <van-field
        v-model="pass"
        type="password"
        name="密码"
        placeholder="请输入密码"
        :rules="[{ required: true,pattern:/^\d{6}$/,  message: '请输入密码' }]"
      />
      <div style="margin: 16px 0;">
        <van-button round block type="info" native-type="submit">登陆</van-button>
      </div>
    </van-form>
    <span @click="go">去注册</span>
  </div>
</template>

<script>
import {user_login} from '../utils/api'

export default {
  data(){
    return {
      phone:'',
      pass:''
    }
  },
  methods:{
    go(){this.$router.push("/register")},
    onSubmit(){
      user_login(this.$data).then((res)=>{
        if( res.data.code == 200 ){
            //  console.log(res);
          //保存token
          localStorage.setItem('token',res.data.token);
          //保存userinfo
          localStorage.setItem('userinfo',JSON.stringify( res.data.userinfo ));
          //请求数据库中的收藏列表
          this.$store.dispatch('cl/request_collectlist');
          //请求数据库中的购物车列表
          this.$store.dispatch('sl/request_shopcartlist');

          //跳转到首页
          this.$router.push('/index');
        }
      })
    }
  }
}
</script>

<style lang='scss'>
.login{
  margin: 0 20px;
  .title{
    text-align: center;
    padding: 50px 0;
  }
  .van-field{
    border: 1px solid #ccc;
    border-radius: 30px;
    margin: 30px 0;
  }
}
</style>